<template>
	<e-popup bgColor="transparent" :show="show" round="20" :closeOnClickOverlay="true" @close="$emit('close')">
		<view class="mp-box">
			<view class="img-box">
				<!-- #ifndef APP -->
				<view class="e-flex">
					<view class="img-header e-flex-1 e-flex e-flex-items-start">
						<image :src="$staticPath('share_arrow.png')" class="share-arrow e-m-r-16"></image>
						<view class="share-tips c-white e-flex">
							<text>{{ $t('common.长按图片保存或转发') }}</text>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<image class="share-img" :src="url" mode="heightFix"></image>
			</view>
		</view>
		<view class="bg-white  border-20"  @tap="$emit('close')">
			<!-- #ifdef APP-PLUS -->
			<view class="e-p-b-44 e-p-t-44 e-flex-xy-center">
				<view class="share-item m-r-176" @tap="share('WXSceneSession')">
					<image  :src="$staticPath('wechat1.png')"></image>
					<view class="e-font-24 text-center">{{ $t('common.微信') }}</view>
				</view>
				<view class="share-item" @tap="share('WXSenceTimeline')">
					<image :src="$staticPath('timeline1.png')"></image>
					<view class="e-font-24 text-center">{{ $t('common.朋友圈') }}</view>
				</view>
			</view>
			<!-- #endif -->
			<view class="e-p-30 c-34 e-flex-xy-center">
				<text>{{$t('common.取消')}}</text>
			</view>
		</view>
	</e-popup>
</template>

<script>
export default {
	props: {
		show: Boolean,
		url: String,
	},
	methods: {
		// #ifdef APP-PLUS
		share(scene) {
			uni.share({
				provider: 'weixin',
				scene,
				type: 2,
				imageUrl:this.url,
				success: res => {
					this.$emit('close')
				},
				fail: err => {
					console.log('fail:' + JSON.stringify(err))
				}
			})
		},
		// #endif
	}
}
</script>

<style lang="scss" scoped>
.m-r-176 {
	margin-right: 176rpx !important;
}
.c-34 {
	color: #343434;
}
.border-20{
	border-radius: 20rpx 20rpx 0 0 ;
}
.share-item {
	margin: 0;
	image {
		border-radius: 50%;
		margin-bottom: 16rpx;
		width: 104rpx;
		height: 104rpx;
	}
}
.title-btn {
	height: 94rpx;
	font-size: 28rpx;
	line-height: 94rpx;
}

.mp-box {
	margin: 0 auto 38rpx auto;
	.img-box {
		.share-img {
			// width: 560rpx;
			height: 912rpx;
		}
	}
	.img-header {
		height: 170rpx;
		padding: 0 0 16rpx 36rpx;
		.share-arrow {
			width: 84rpx;
			height: 102rpx;
			margin-top: auto;
		}
		.share-tips {
			padding: 0 20rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 20rpx;
			border: 4rpx dashed #ffffff;
		}
	}
}
</style>
